<template>
  <div class="room h-100 position-relative">
    <div class="row h-100 m-0">
      <div class="col h-100 p-0">
        <el-image
          class="w-100 h-100"
          src="https://gejuimage.oss-cn-beijing.aliyuncs.com/webimage/add/23213.jpg"
          fit="cover"
        ></el-image>
        <div class="position-absolute top left right mt-3 text-white" style="height: 45px;">
          <div class="row h-100 m-0 text-left">
            <div class="col-auto h-100">
              <router-link to="/">
                <img class="h-100" src="../common/img/logosm.svg" alt />
              </router-link>
            </div>
            <div class="col px-0 pt-1">
              <h6 class="mb-0 small font-weight-bold">语文-第二单元第5章</h6>
              <p class="small mb-0 opacity-50">班级：小苹果班</p>
            </div>
          </div>
        </div>

        <div class="navopen" style="right: -18px;" @click="showRightDrawer">
          <img src="../common/img/rightOpen.svg" alt style="height: 100px; " />
        </div>
      </div>
      <div class="col-auto overflow-hidden px-0">
        <div class="h-100 w-30vh text-white">
          <!--焦点主播-->
          <div class="bg-dark h-16vh position-relative">
            <div class="d-flex align-items-center h-100">
              <div class="block m-auto">
                <el-avatar :size="50" src="http://img.geju.com/webimage/add/1/004.jpg"></el-avatar>
              </div>
            </div>
            <div class="position-absolute bottom w-100 text-white p-2">
              <div class="row justify-content-between">
                <div class="col-auto opacity-50 pt-1">王小萌</div>
                <div class="col text-right opacity-25">
                  <span class="iconfont lwmike_off h4"></span>
                  <span class="iconfont lwcamera_off h4"></span>
                </div>
              </div>
            </div>
          </div>

          <!--当前发言人-->
          <div class="h-16vh position-relative">
            <el-image
              class="w-100 h-100"
              src="http://img.geju.com/webimage/add/1/007.jpg"
              fit="cover"
            ></el-image>
            <div class="position-absolute bottom w-100 p-2 d-flex justify-content-between">
              <div class="opacity-50 pt-1">王小萌</div>
              <div class="opacity-25">
                <span class="iconfont lwmike_off h4"></span>
                <span class="iconfont lwcamera_off h4"></span>
              </div>
            </div>
            <div
              class="position-absolute top bottom left right z-index-10"
              style="border-left: 3px solid #00C44B;"
            ></div>
          </div>

          <div class="h-16vh position-relative">
            <el-image
              class="w-100 h-100"
              src="http://img.geju.com/webimage/add/1/005.jpg"
              fit="cover"
            ></el-image>
            <div class="position-absolute bottom w-100 p-2 d-flex justify-content-between">
              <div class="opacity-50 pt-1">李小萌</div>
              <div class="opacity-25">
                <span class="iconfont lwmike_off h4"></span>
                <span class="iconfont lwcamera_off h4"></span>
              </div>
            </div>
          </div>
          <div class="h-16vh position-relative">
            <el-image
              class="w-100 h-100"
              src="http://img.geju.com/webimage/add/1/002.jpg"
              fit="cover"
            ></el-image>
            <div class="position-absolute bottom w-100 p-2 d-flex justify-content-between">
              <div class="opacity-50 pt-1">王小萌</div>
              <div class="opacity-25">
                <span class="iconfont lwmike_off h4"></span>
                <span class="iconfont lwcamera_off h4"></span>
              </div>
            </div>
          </div>

          <div class="h-16vh p-0 position-relative">
            <el-image
              class="w-100 h-100"
              src="http://img.geju.com/webimage/add/1/003.jpg"
              fit="cover"
            ></el-image>
            <div class="position-absolute bottom w-100 p-2 d-flex justify-content-between">
              <div class="opacity-50 pt-1">王小萌</div>
              <div class="opacity-25">
                <span class="iconfont lwmike_off h4"></span>
                <span class="iconfont lwcamera_off h4"></span>
              </div>
            </div>
          </div>
          <div class="h-16vh p-0 position-relative">
            <el-image
              class="w-100 h-100"
              src="http://img.geju.com/webimage/add/1/001.jpg"
              fit="cover"
            ></el-image>
            <div class="position-absolute bottom w-100 p-2 d-flex justify-content-between">
              <div class="opacity-50 pt-1">王小萌</div>
              <div class="opacity-25">
                <span class="iconfont lwmike_off h4"></span>
                <span class="iconfont lwcamera_off h4"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="bottomNavopen open hand"
      @click="showBottomDrawer"
      v-on:click="show = !show"
      :style="bottomDefaultwz"
    >
      <img src="../common/img/bottomOpen.svg" alt />
    </div>

    <transition name="slide-fade">
      <div
        class="position-absolute bottom left right"
        v-show="bottomDefault"
        v-if="show"
        :style="bottomDefault"
      >
        <div class="pt-1 text-white" style="background-color: rgba(0, 0, 0, 0.7);">
          <div class="row px-3">
            <div class="col-auto pt-2 pr-0">
              <!--信号强度-->
              <div class="w-h-32p">
                <!--on-th 是用来控制显示信号强度的,从一格到五格分别为：（on-one/on-tow/on-th/on-four/on-fiv）-->
                <div class="row h-100 align-items-end m-0 xinhao on-th">
                  <div class="col h-20"></div>
                  <div class="col h-40"></div>
                  <div class="col h-60"></div>
                  <div class="col h-80"></div>
                  <div class="col h-100"></div>
                </div>
              </div>
            </div>
            <div class="col-auto h1 mb-0 pl-2">
              <span class="iconfont lwmike_off mx-1 text-secondary"></span>
              <span class="iconfont lwcamera_hollow mx-1 text-success"></span>
            </div>
            <div class="col h1 mb-0 text-center">
              <ul class="row justify-content-md-center">
                <!-- <li class="col-auto ">
                                    <el-popover placement="top" width="120" trigger="click">
                                        <div>
                                            <div class="border border-light-1 rounded p-2 hand mb-2">
                                                <span class="iconfont lwanswer"></span> 授课模式
                                            </div> 
                                            <div class="border border-success rounded p-2  mb-2 text-success">
                                                <span class="iconfont lwanswer"></span> 会议模式
                                            </div> 
                                            <div class="border border-light-1 rounded p-2 hand ">
                                                <span class="iconfont lwanswer"></span> 会议模式
                                            </div> 
                                        </div>
                                        
                                        <span slot="reference" class="iconfont lwmulti-screen "></span>
                                    </el-popover>
                </li>-->
                <!-- <li class="col-auto ">
                                    <span class="iconfont lwppt_switch"></span>
                </li>-->
                <li class="col-auto">
                  <span class="iconfont lwartboard hand"></span>
                </li>
                <li class="col-auto">
                  <span class="iconfont lwshared hand"></span>
                </li>
                <li class="col-auto">
                  <span @click="answer = true" class="iconfont lwanswer hand"></span>
                </li>
                <li class="col-auto">
                  <span @click="chatroom = true" class="iconfont lwchat hand"></span>
                </li>
                <li class="col-auto">
                  <span @click="users = true" class="iconfont lwuser_group hand"></span>
                </li>
                <li class="col-auto">
                  <el-popover placement="top" width="380" trigger="click">
                    <div>
                      <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
                        <el-tab-pane label="音视频设置" name="first">
                          <CameraMikeEdit></CameraMikeEdit>
                        </el-tab-pane>
                        <el-tab-pane label="高级设置" name="second">
                          <AdvancedSettingsEdit></AdvancedSettingsEdit>
                        </el-tab-pane>
                        <el-tab-pane label="查看系统信息" name="third">
                          <SystemInformation></SystemInformation>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                    <span slot="reference" class="iconfont lwnav_system hand"></span>
                  </el-popover>
                </li>
              </ul>
            </div>
            <div class="col-auto pt-1">
              <div class="py-1 hand">
                <img class="w-h-32p" src="../common/img/Record-off.svg" alt />
                <span class="small opacity-75 ml-2">开始录制</span>
              </div>
            </div>
            <div class="col-auto pt-2">
              <div class="border border-success rounded-100 pb-1 px-3 position-relative hand">
                <span class="mr-3 small text-success">直播中…</span>
                <div
                  class="position-absolute z-index-10 top right"
                  style="font-size: 32px; line-height: 28px; margin-right: -2px;"
                >
                  <span class="iconfont lwhang_up_solid text-danger"></span>
                </div>
                <div
                  class="z-index-0 position-absolute rounded-circle overflow-hidden top right p-1"
                >
                  <div
                    class="w-h-30p rounded-circle"
                    style="font-size: 24px; line-height: 24px; margin-right: -2px;"
                  >
                    <span class="iconfont lwdot text-white"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!--管理互动问题-->
    <el-dialog title=" 管理互动问题 " :visible.sync="answer " width="480px">
      <Answer></Answer>
      <div class="position-absolute left right bottom pb-3 px-4 bg-white">
        <el-button class="w-100" type="primary" @click="answer = false , answer_on = true">开始答题</el-button>
      </div>
    </el-dialog>

    <!--开始答题-->
    <el-dialog
      title="一、这是一个互动问题的标题 "
      :visible.sync="answer_on "
      width="520px"
      top="25%"
      :modal="false"
      :show-close="false"
    >
      <div class="px-3">
        <ul class="pb-3">
          <li class="row pb-3">
            <div class="col-auto pr-0">A</div>
            <div class="col">
              <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
            </div>
          </li>

          <li class="row pb-3">
            <div class="col-auto pr-0">B</div>
            <div class="col">
              <el-progress
                :text-inside="true"
                :stroke-width="24"
                :percentage="100"
                status="success"
              ></el-progress>
            </div>
          </li>

          <li class="row pb-3">
            <div class="col-auto pr-0">C</div>
            <div class="col">
              <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
            </div>
          </li>

          <li class="row pb-3">
            <div class="col-auto pr-0">D</div>
            <div class="col">
              <el-progress
                :text-inside="true"
                :stroke-width="20"
                :percentage="50"
                status="exception"
              ></el-progress>
            </div>
          </li>
        </ul>
        <el-divider></el-divider>
        <div class="row px-2">
          <div class="col px-2">
            <el-button type="primary" class="py-4 w-100" plain>
              <h1 class="din_alternatebold">A</h1>
            </el-button>
          </div>
          <div class="col px-2">
            <el-button type="primary" class="py-4 w-100" plain>
              <h1 class="din_alternatebold">B</h1>
            </el-button>
          </div>
          <div class="col px-2">
            <el-button type="primary" class="py-4 w-100" plain>
              <h1 class="din_alternatebold">C</h1>
            </el-button>
          </div>
          <div class="col px-2">
            <el-button type="primary" class="py-4 w-100" plain>
              <h1 class="din_alternatebold">D</h1>
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!--聊天室-->
    <el-drawer
      title="聊天中…"
      :modal="false"
      :visible.sync="chatroom"
      :direction="direction"
      :before-close="handleClose"
      size="460px"
      class="bg-chatroom text-white"
    >
      <Chatroom></Chatroom>
    </el-drawer>

    <!--聊天室-->
    <el-drawer
      title=" "
      :modal="false"
      :visible.sync="users"
      :direction="direction"
      :before-close="handleClose"
      size="460px"
    >
      <Users></Users>
    </el-drawer>
  </div>
</template>
<script>
import CameraMikeEdit from "components/cameraMikeEdit"; // 音视频设置
import AdvancedSettingsEdit from "components/advancedSettingsEdit"; // 高级设置
import SystemInformation from "components/systemInformation"; // 查看系统信息
import Answer from "components/answer"; // 编辑互动答题
import Chatroom from "components/chatroom"; // 聊天室
import Users from "components/users"; // 管理参会人员
export default {
  name: "Room",
  components: {
    CameraMikeEdit, // 音视频设置
    AdvancedSettingsEdit, // 高级设置
    SystemInformation, // 查看系统信息
    Answer, // 编辑互动答题
    Chatroom, // 聊天室
    Users // 管理参会人员
  },
  data() {
    return {
      chatroom: false,
      show: true,
      leftStyle: false,
      answer: false,
      answer_on: false,
      users: false,
      leftDefault: {
        maxWidth: "350px",
        minWidth: "250px"
      },
      bottomDefault: true,
      activeName: "first"
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },

    showRightDrawer() {
      this.leftStyle = !this.leftStyle;
      if (this.leftStyle === true) {
        this.leftDefault = {};
      } else {
        this.leftDefault = {};
      }
    },
    showBottomDrawer() {
      this.bottomDefault = !this.bottomDefault;
      if (this.bottomDefault === true) {
        this.bottomDefaultwz = {
          bottom: "35px",
          transition: "all .33s ease"
        };
      } else {
        this.bottomDefaultwz = {
          bottom: "-17px",
          transition: "all 0s ease"
        };
      }
    }
  }
};
</script>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
    .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
    
 {
  transform: translateY(32px);
  opacity: 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.xinhao {
  padding: 1px;
}

.xinhao > div {
  margin-right: 2px;
  background-color: #ffffff;
  border-radius: 0.15rem !important;
  padding: 0 !important;
  opacity: 0.25;
}

.on-one.xinhao > div:nth-of-type(1) {
  background-color: #00c44b;
  opacity: 1 !important;
}

.on-tow.xinhao > div:nth-of-type(1) {
  background-color: #00c44b;
  opacity: 1 !important;
}

.on-tow.xinhao > div:nth-of-type(2) {
  background-color: #00c44b;
  opacity: 1 !important;
}

.on-th.xinhao > div:nth-of-type(1) {
  background-color: #00c44b;
  opacity: 1 !important;
}

.on-th.xinhao > div:nth-of-type(2) {
  background-color: #00c44b;
  opacity: 1 !important;
}

.on-th.xinhao > div:nth-of-type(3) {
  background-color: #00c44b;
  opacity: 1 !important;
}

.on-four.xinhao > div:nth-of-type(1) {
  background-color: #00c44b;
  opacity: 1 !important;
}

.on-four.xinhao > div:nth-of-type(2) {
  background-color: #00c44b;
  opacity: 1 !important;
}

.on-four.xinhao > div:nth-of-type(3) {
  background-color: #00c44b;
  opacity: 1 !important;
}

.on-four.xinhao > div:nth-of-type(4) {
  background-color: #00c44b;
  opacity: 1 !important;
}

.on-fiv.xinhao > div {
  background-color: #00c44b;
  opacity: 1 !important;
}

.el-menu--collapse {
  width: 0;
  overflow: hidden;
}

.bg-chatroom .el-drawer__header {
  padding: 11px 20px 12px;
  background-color: rgba(0, 0, 0, 0.3);
}

.navopen {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.bottomNavopen {
  position: absolute;
  left: 50%;
  width: 100px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.open {
  bottom: 35px;
  transition: all 0.3s ease;
}

.close {
  bottom: -16px;
  transition: all 0.3s ease;
}

.el-tabs .el-form-item__content {
  line-height: 32px;
}

.bg-chatroom .el-drawer {
  background-color: rgba(18, 27, 46, 0.95);
}
</style>